<script lang="ts" setup>
import { ref } from 'vue'
import { tabbarStore } from '@/layouts/fg-tabbar/tabbar'

// 当前选中的分类
const selectedCategory = ref(1) // 默认选中数码
// 顶部分类数据
const topCategories = ref([
  { id: 1, name: '推荐', className: 'category-icon-18' },
  { id: 2, name: '数码', className: 'category-icon-1' },
  { id: 3, name: '电器', className: 'category-icon-2' },
  { id: 4, name: '家居', className: 'category-icon-3' },
  { id: 5, name: '母婴', className: 'category-icon-4' },
  { id: 6, name: '美妆', className: 'category-icon-5' },
  { id: 7, name: '个护', className: 'category-icon-6' },
  { id: 8, name: '服装', className: 'category-icon-7' },
  { id: 9, name: '鞋类', className: 'category-icon-8' },
  { id: 10, name: '箱包', className: 'category-icon-9' },
  { id: 11, name: '珠宝', className: 'category-icon-10' },
  { id: 12, name: '保健', className: 'category-icon-11' },
  { id: 13, name: '食品', className: 'category-icon-12' },
  { id: 14, name: '酒类', className: 'category-icon-13' },
  { id: 15, name: '户外', className: 'category-icon-14' },
  { id: 16, name: '玩具', className: 'category-icon-15' },
  { id: 17, name: '汽车', className: 'category-icon-16' },
  { id: 18, name: '建材', className: 'category-icon-17' },
])
// 设备标签页数据
const deviceTabs = ref([
  { name: 'phone', title: '手机' },
  { name: 'tablet', title: '平板' },
  { name: 'computer', title: '电脑' },
  { name: 'headphone', title: '耳机' },
  { name: 'audio', title: '音响' },
  { name: 'wearable', title: '穿戴' },
  { name: 'keyboard', title: '键鼠' },
])

const activeTab = ref('phone')
const appleProductsTab = ref(1)

// 苹果产品数据
const appleProducts = ref([
  { id: 1, name: '苹果iPhone', price: '¥3999' },
  { id: 2, name: '苹果有锁机', price: '¥2999' },
  { id: 3, name: '三星samsung', price: '¥2499' },
  { id: 4, name: 'htc', price: '¥1999' },
  { id: 5, name: '小米xiaomi', price: '¥1999' },
  { id: 6, name: '华为huawei', price: '¥2499' },
  { id: 7, name: 'oppo', price: '¥1999' },
  { id: 8, name: 'vivo', price: '¥1999' },
])

// 事件处理
function handleCategoryClick(item: any) {
  selectedCategory.value = item.id
  console.log('分类点击:', item)
}

function handleTabChange(value: string) {
  console.log('标签页切换:', value)
}

function handleProductClick(item: any) {
  console.log('产品点击:', item)
  appleProductsTab.value = item.id
}

// 品牌筛选弹框状态
const showBrandModal = ref(false)
const selectedBrand = ref<number>(0)

// 打开品牌筛选弹框
function openBrandModal() {
  selectedBrand.value = appleProductsTab.value
  showBrandModal.value = true
  tabbarStore.customTabbarEnable = false
}

function toggleBrand(id: number) {
  selectedBrand.value = id
}

// 关闭品牌筛选弹框
function closeBrandModal() {
  showBrandModal.value = false
  tabbarStore.customTabbarEnable = true
  appleProductsTab.value = selectedBrand.value
}

// 确认品牌筛选
function confirmBrandFilter() {
  closeBrandModal()
}

// 取消品牌筛选
function cancelBrandFilter() {
  closeBrandModal()
}
</script>

<template>
  <view class="category-grid">
    <!-- 推荐、数码、电器 - 自定义组件 -->
    <view class="mb-18rpx flex justify-start px-4">
      <scroll-view scroll-x class="!whitespace-nowrap" :show-scrollbar="false" enhanced>
        <view class="inline-flex items-center">
          <view
            v-for="item in topCategories" :key="item.id" class="relative mr-40rpx flex-shrink-0"
            @click="handleCategoryClick(item)"
          >
            <!-- 图标容器 -->
            <view class="relative flex flex-col cursor-pointer items-center pb-2">
              <!-- 选中状态的背景 -->
              <view
                v-if="selectedCategory === item.id"
                class="absolute rounded-full bg-[#2A2A2A] bg-opacity-70 -inset-0.5"
              />
              <view class="mb-12rpx flex items-center justify-center rounded-full bg-[#2A2A2A] bg-opacity-70 p-2">
                <view
                  class="relative z-10 h-74rpx w-74rpx flex items-center justify-center rounded-full bg-cover bg-center"
                  :class="item.className"
                >
                  <!-- 图标已包含在背景图片中，不需要额外的图标 -->
                </view>
              </view>

              <!-- 文字标签 -->
              <text
                class="relative z-10 text-sm"
                :class="selectedCategory === item.id ? 'text-white' : 'text-gray-300'"
              >
                {{ item.name }}
              </text>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 使用 UnoCSS 的分隔线 -->
    <view class="mb-64rpx flex justify-center">
      <view class="h-[8rpx] w-[90rpx] rounded-[238rpx] bg-[#4A4A4A]" />
    </view>

    <!-- 手机平板电脑 - wot组件 -->
    <view class="mb-16rpx">
      <!-- 手机平板电脑 - wot组件 -->
      <wd-tabs v-model="activeTab" slidable="always" auto-line-width @change="handleTabChange">
        <wd-tab v-for="tab in deviceTabs" :key="tab.name" :title="tab.title" :name="tab.name" />
      </wd-tabs>
    </view>

    <!-- 苹果iPhone - 自定义组件 -->
    <view class="box-border px-30rpx">
      <view class="flex items-center">
        <!-- 左侧滚动区域 -->
        <scroll-view scroll-x class="flex-1 !whitespace-nowrap" :show-scrollbar="false" enhanced>
          <view
            v-for="item in appleProducts" :key="item.id" :class="{ 'bg-[#1A1A1A]': item.id === appleProductsTab }"
            class="inline-flex flex-shrink-0 items-center justify-center rounded-[6rpx] px-26rpx py-14rpx"
            @click="handleProductClick(item)"
          >
            <text class="block text-24rpx text-white font-medium">
              {{ item.name }}
            </text>
          </view>
        </scroll-view>

        <!-- 右侧定位图标 -->
        <view class="ml-4 flex cursor-pointer items-center" @click="openBrandModal">
          <view class="i-carbon-chevron-down text-xl text-white" />
        </view>
      </view>
    </view>

    <!-- 品牌筛选弹框 -->
    <wd-popup v-model="showBrandModal" position="bottom" custom-class="!rounded-3" @close="closeBrandModal">
      <view class="box-border rounded-xl bg-[#1A1A1A] p-15px">
        <!-- 弹框标题和关闭按钮 -->
        <view class="relative mb-5 w-full flex items-center justify-center">
          <text class="text-lg text-white font-medium">
            品牌筛选
          </text>
          <image
            src="/static/images/home/Close.png" mode="scaleToFill" class="absolute right-0 h-20px w-20px text-end"
            @click="closeBrandModal"
          />
        </view>

        <!-- 品牌选择网格 -->
        <view class="grid grid-cols-3 mb-8 gap-11px">
          <view
            v-for="brand in appleProducts" :key="brand.id"
            class="flex cursor-pointer items-center justify-center whitespace-nowrap border border-white rounded-5px border-solid py-3 transition-all"
            :class="selectedBrand === brand.id ? 'bg-white text-[#1A1A1A]' : 'bg-transparent text-white'"
            @tap="toggleBrand(brand.id)"
          >
            <text class="text-xs font-600">
              {{ brand.name }}
            </text>
          </view>
        </view>

        <!-- 底部按钮 -->
        <view class="flex gap-4">
          <!-- 取消按钮 -->
          <view
            class="flex flex-1 cursor-pointer items-center justify-center border border-[#999999] rounded-[5px] border-solid bg-transparent transition-all active:bg-gray-800"
            @click="cancelBrandFilter"
          >
            <text class="text-base text-white font-600">
              取消
            </text>
          </view>

          <!-- 确认按钮 -->
          <view
            class="h-12 flex flex-1 cursor-pointer items-center justify-center rounded-[5px] bg-white transition-all active:bg-gray-100"
            @click="confirmBrandFilter"
          >
            <text class="text-base text-[#1A1A1A] font-600">
              确认
            </text>
          </view>
        </view>
      </view>
    </wd-popup>
  </view>
</template>

<style lang="scss" scoped>
:deep(.wd-tabs__nav-item.is-active) {
  font-family:
    Alibaba PuHuiTi 2,
    Alibaba PuHuiTi 20;
  font-weight: 500;
  font-size: 36rpx !important;
  color: #ffffff;
  line-height: 49rpx;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

// 使用 SCSS 循环生成分类图标样式
@for $i from 1 through 18 {
  .category-icon-#{$i} {
    background-image: url('/static/images/icon/icon#{$i}@2x.png');
  }
}
</style>
